{extend name="shared/layout" /}
{block name="title"}新增消息模版{/block}
{block name="css"}
    <link href="/static/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
{/block}
{block name="javascript"}
    <script src="/static/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#ok").bind("click", Save);
            $("#cancel").bind("click", function () {
                parent.layer.close(parent.layer_add_index);
            });            
        })
        
        var template_data = [];
        function wechatChange(obj){
            if(obj.value!=""){
                layui.use(['layer'], function(){
                    var load_index = layer.load(0, { shade: false });
                    $.ajax({
                        type: "post",
                        url: "{:url('template/getTempList')}?t=" + Date.parse(new Date()),
                        data: {original_id : obj.value},
                        dataType: "json",
                        success: function (result) {
                            layer.close(load_index);
                            if (result.errcode == 0) {
                                var html = "<option value=''>选择消息模版</option>";
                                template_data = result.list;
                                var i = 0;
                                template_data.forEach(e => {
                                    html+="<option value='"+e.template_id+"' idx='"+i+"' >"+e.title+"</option>";
                                    i++;
                                });
                                $("#seltype").empty().append(html);
                                $("#type_1").empty();
                            } else {
                                layer.alert(result.errmsg);
                            }
                        }
                    })
                })
            }else{
                template_data = [];
                $("#seltype option").remove();
                $("#type_1").empty();
                $("#seltype").append("<option value=''>选择消息模版</option>");
            }
        }

        function templatechange(obj){
            if(obj.value!=""){
                var idx = $(obj).find("option:selected").attr("idx");
                var items = template_data[idx].content.split('\n');
                var emphasishtml = "<option value=''>无</option>"; 
                var html = "";
                for (let index = 0; index < items.length; index++) {
                    const element = items[index].replace(/{.*}/,'');
                    if(element!=""){
                        html+= '<div class="form-group">';
                        html+= '<label class="col-sm-2 control-label">'+element+'：</label>'
                        html+= '<div class="col-sm-5">';
                        html+= '<input type="text" id="txtval_'+(index+1)+'" name="val" class="form-control" placeholder="请输入'+element+'">';
                        html+= '</div>';
                        html+= '<label class="col-sm-1 control-label">颜色：</label>';
                        html+= '<div class="input-group colorpicker-d01 col-sm-2">';
                        html+= '<input type="text" name="color" id="txtcolor_'+(index+1)+'" value="#000000" class="form-control">';
                        html+= '<span class="input-group-addon"><i></i></span>';
                        html+= '</div>';
                        html+= '</div>';
                        var t = items[index].match(/{{.*}}/)[0].replace("{{","").replace("}}","");
                        emphasishtml +="<option value='" + t + "'>" + element + "</option>";
                    }
                }
                html+='<div class="form-group"><label class="col-sm-2 control-label">放大关键字：</label>';
                html+='<div class="col-sm-3"><select name="emphasis" id="selemphasis" class="form-control m-b">' + emphasishtml + '</select></div></div>';
                $("#type_1").empty().append(html);
                $(".colorpicker-d01").colorpicker();
            }else{
                $("#type_1").empty();
            }
        }

        function Save() {
            layui.use(['layer'], function(){
                var tempname = $.trim($("input[name=temp_name]").val());
                if (tempname.length == 0) {
                    layer.tips('名称不能为空！', 'input[name=temp_name]', { tips: [2, '#78BA32'] });
                    return false;
                }
                var originalid = $.trim($("select[name=original_id]").val());
                if (originalid.length == 0) {
                    layer.tips('请选择微信号！', 'select[name=original_id]', { tips: [2, '#78BA32'] });
                    return false;
                }
                var templateId = $.trim($("select[name=template_id]").val());
                if (templateId.length == 0) {
                    layer.tips('请选择模版！', 'select[name=template_id]', { tips: [2, '#78BA32'] });
                    return false;
                }            
                var pageurl = $.trim($("#txtpageurl").val());
                if (pageurl.length == 0) {
                    layer.tips('跳转链接不能为空！', '#txtpageurl', { tips: [2, '#78BA32'] });
                    return false;
                }

                var temp_data = new Object();
                var names = $("input[name=val]");
                var colors = $("input[name=color]");
                for (let index = 0; index < names.length; index++) {
                    if(names[index].value == ""){
                        layer.tips('不能为空！', '#txtval_'+(index+1), { tips: [2, '#78BA32'] });
                        return false;
                    }
                    if(colors[index].value == ""){
                        layer.tips('不能为空！', '#txtcolor_'+(index+1), { tips: [2, '#78BA32'] });
                        return false;
                    }
                    temp_data["keyword"+(index+1)] = {value : names[index].value,color: colors[index].value};
                }
                var emphasis = $("select[name=emphasis]").val();
                
                var jsondata = encodeURIComponent(JSON.stringify(temp_data))
                var load_index = layer.load(0, { shade: false });
                $.ajax({
                    type: "post",
                    url: "{:url('template/add')}?t=" + new Date(),
                    data: {original_id : originalid,template_id : templateId, template_data : jsondata,temp_name: tempname,pageurl : pageurl,emphasis : emphasis},
                    dataType: "json",
                    success: function (result) {
                        layer.close(load_index);
                        if (result.code == 0) {
                            layer.alert('保存成功！', function () {
                                if (typeof (parent.initTable) == "function")
                                    parent.initTable();
                                parent.layer.close(parent.layer_add_index)
                            });
                        } else {
                            layer.alert(result.msg);
                        }
                    }
                });
            })
        }
    </script>
{/block}
{block name="content"}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form method="post" id="fmNew" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" id="txttempname" name="temp_name" class="form-control" placeholder="请输入名称">
                                </div>                                                                
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">微信公众号：</label>
                                <div class="col-sm-3">
                                    <select name="original_id" id="selwechat" onchange="wechatChange(this)" class="form-control m-b">
                                        <option value="">选择微信公众号</option>
                                        {volist name="appletlist" id="vo" key="k"}
                                            <option value="{$vo.original_id}">{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">消息模版：</label>
                                <div class="col-sm-3">
                                    <select name="template_id" id="seltype" onchange="templatechange(this)" class="form-control m-b">
                                        <option value="">选择消息模版</option>                                        
                                    </select>
                                </div>
                            </div>  
                            <div class="form-group">
                                <label class="col-sm-2 control-label">跳转链接：</label>
                                <div class="col-sm-6">
                                    <input type="text" id="txtpageurl" name="pageurl" class="form-control" placeholder="请输入跳转链接">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>               
                            <div id="type_1">
                            </div>
                            <div class="form-group">
                                <div class="col-sm-12 col-sm-offset-5">
                                    <button class="btn btn-primary" id="ok" type="button">提交</button>
                                    <button class="btn btn-white" id="cancel" type="button">取消</button>
                                </div>
                            </div>
                        </div>                        
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>        
{/block}